<!DOCTYPE html>
<html>
<head>
    <title>门店耗材出库表</title>
    <#include "/header.html">
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList&&!showListDetail">
        <div class="grid-btn">
            <form class="form-inline" role="form">
                <a class="btn btn-default btn-sm" @click="reset"><i class="fa fa-refresh"></i></a>
                <div class="form-group">
                    <input type="text" class="form-control input-sm" v-model.trim="q.outNo" @keyup.enter="query" placeholder="单据号">
                </div>&nbsp;&nbsp;
                <div class="form-group">
                    <a class="btn btn-default btn-sm"  @click="query">查询</a>
                </div>&nbsp;&nbsp;&nbsp;
                <a class="btn btn-primary btn-sm" @click="addIn"><i class="fa fa-plus"></i>&nbsp;新增出库</a>

            </form>
        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>
    <div v-show="showListDetail&&!showList" class="panel panel-default">
        <el-container style="height: 800px; border: 1px solid #eee">
            <!-- 耗材信息 start -->
            <el-aside width="44%" style="border-right:1px solid #c0c4cc; ">
                <el-container style="height: 100%;">
                    <el-header style="height: 40px">耗材信息</el-header>
                    <!-- 分类树 start -->
                    <el-container style="height: 100%;">
                        <el-aside width="22%" style="border-right:1px solid #eee; padding: 20px;">
                            <el-input
                                    placeholder="输入关键字查找分类"
                                    size="mini"
                                    v-model="materialCategorySearch">
                            </el-input>
                            <el-tree
                                    class="filter-tree"
                                    :data="materialCategoryList"
                                    :props="defaultProps"
                                    default-expand-all
                                    :filter-node-method="filterNode"
                                    :expand-on-click-node="false"
                                    @node-click="materialsSearch"
                                    ref="tree2">
                            </el-tree>
                        </el-aside>
                        <!-- 分类树 end -->
                        <!-- 耗材 start -->
                        <el-main>
                            <el-form :inline="true" :model="materialSearchForm" class="demo-form-inline" size="mini">
                                <el-form-item >
                                    <el-input v-model="materialSearchForm.materialName" @keyup.enter="materialsSearchTwo" placeholder="耗材名称"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="materialsSearchTwo">查询</el-button>
                                </el-form-item>
                            </el-form>
                            <el-table border stripe ref="multipleTable" :data="materialTableData"  style="height: 650px;"
                                      tooltip-effect="dark" size="mini">
                                <el-table-column prop="materialId" label="ID" width="50" align="center"></el-table-column>
                                <el-table-column prop="materialName" label="耗材名称" align="center" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="length" label="长(m)" width="60" align="center" header-align="center"></el-table-column>
                                <el-table-column prop="width" label="宽(m)" width="60" align="center" header-align="center"></el-table-column>
                                <el-table-column prop="weight" label="克重" width="60" align="center" header-align="center"></el-table-column>
                                <el-table-column prop="specifications" label="规格" width="80" align="center"></el-table-column>
                                <el-table-column prop="materialModel" label="型号" width="80" align="center"></el-table-column>
                                <el-table-column prop="materialQuantity" label="库存数量" width="80" align="center"></el-table-column>
                                <!--<el-table-column prop="unit" label="单位" width="45" :formatter="formatUnit" align="center"></el-table-column>-->
                                <el-table-column prop="showUnit" label="单位" width="45"  align="center"></el-table-column>
                                <el-table-column prop="categoryName" label="分类" width="70" align="center"></el-table-column>
                                <el-table-column label="操作" width="50" align="center">
                                    <template slot-scope="scope">
                                        <el-button @click="addMaterial(scope.row)" type="text" size="small">添加</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="block text-right">
                                <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="1"
                                        :page-sizes="[page.size, 2*page.size, 4*page.size]"
                                        :page-size="page.pageSize"
                                        :total="page.total">
                                </el-pagination>
                            </div>
                        </el-main>
                    </el-container>
                    <!-- 耗材 end -->
                </el-container>
            </el-aside>
            <!-- 耗材信息 end -->
            <!-- 采购耗材信息 start -->
            <el-main>
                <el-form ref="form" :model="purchaseApplyForm" label-width="80px" size="mini">
                    <el-table border stripe ref="multipleTable" :data="purchaseApplyForm.storePurchaseApplyDetailEntityList" style="margin-bottom: 20px;"
                              tooltip-effect="dark" size="mini">
                        <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
                        <el-table-column prop="materialId" label="耗材ID" width="60" align="center"></el-table-column>
                        <el-table-column prop="materialName" label="耗材名称" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="specifications" label="规格" width="100" align="center"></el-table-column>
                        <el-table-column prop="materialModel" label="型号" width="100" align="center"></el-table-column>
                        <el-table-column prop="length" label="长" width="70" align="center"></el-table-column>
                        <el-table-column prop="width" label="宽" width="70" align="center"></el-table-column>
                        <el-table-column prop="weight" label="克重" width="60" align="center"></el-table-column>
                        <!--<el-table-column prop="unit" label="单位" width="50" :formatter="formatUnit" align="center"></el-table-column>-->
                        <el-table-column prop="unit" label="单位" width="50" align="center"></el-table-column>
                        <el-table-column label="数量" width="100" align="center">
                            <template slot-scope="scope">
                                <el-input type="number"
                                          v-model="scope.row.materialQuantity"
                                          size="mini"
                                          min="1"
                                          max="10000"
                                          @change="totalMoneyChange(scope.row,scope.$index)">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="unitMoney" label="单价" width="60" align="center"></el-table-column>
                        <el-table-column prop="totalMoney" label="总价" width="110" align="center" >
                        </el-table-column>

                        <el-table-column label="操作" width="50" align="center">
                            <template slot-scope="scope">
                                <el-button @click="removePurchaseMaterials(scope.row,scope.$index)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-col :span="12">
                        <el-form-item label="出库类型：" size="mini" label-width="120px" :span="12">
                            <el-select v-model="purchaseApplyForm.storePurchaseApplyEntity.type" placeholder="请选择" size="small">
                                <el-option
                                        v-for="item in e.storeMaterialOutTypeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出库总金额：" size="mini" label-width="120px">
                            <el-input v-model="purchaseApplyForm.storePurchaseApplyEntity.totalMoney" readonly="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="purchaseApplyForm.storePurchaseApplyEntity.type === 8?true:false">
                        <el-form-item label="调入门店：" size="mini" label-width="120px" :span="12">
                            <el-select v-model="purchaseApplyForm.storePurchaseApplyEntity.totalMD" placeholder="请选择" size="small">
                                <el-option
                                        v-for="item in selectLists"
                                        :key="item.sellerId"
                                        :label="item.sellerName"
                                        :value="item.sellerId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否含税：" size="mini" label-width="120px" :span="12">
                            <el-select v-model="purchaseApplyForm.storePurchaseApplyEntity.tax" placeholder="是否含税" size="small">
                                <el-option
                                        v-for="item in e.taxEnum"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="申请备注:" size="mini" label-width="120px">
                            <el-input type="textarea" v-model="purchaseApplyForm.storePurchaseApplyEntity.remark"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="text-center">
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交申请</el-button>
                            <el-button @click="close">返 回</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-main>
            <!-- 采购耗材信息 end -->
        </el-container>
    </div>

    <!-- 审核提示框 start -->
    <el-dialog title="提示" :visible.sync="auditDialogVisible" width="25%">
        <span>{{auditOrRejectData.msg}}</span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="auditOrReject" size="small">确 定</el-button>
            <el-button @click="auditDialogVisible = false" size="small">取 消</el-button>
         </span>
    </el-dialog>
    <!-- 审核提示框 end -->

<div v-show="!showDetail" class="panel panel-default">
    <el-row>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>调拨出库明细</span>
            </div>
            <div class="text item">
                <div class="row" style="line-height:30px;font-size: 12px;">
                    <div class="col-md-2">
                        <div class="col-md-6 text-right">调拨出库单号：</div>
                        <div class="col-md-6">{{purchaseApplyForm.storePurchaseApplyEntity.outNo}}</div>
                    </div>
                    <div class="col-md-2">
                        <div class="col-md-5 text-right">出库仓库名称 ：</div>
                        <div class="col-md-7">{{purchaseApplyForm.storePurchaseApplyEntity.stockName}}</div>
                    </div>
                    <div class="col-md-2">
                        <div class="col-md-6 text-right">申请人 ：</div>
                        <div class="col-md-6">{{purchaseApplyForm.storePurchaseApplyEntity.createName}}</div>
                    </div>
                    <div class="col-md-2">
                        <div class="col-md-5 text-right">申请时间 ：</div>
                        <div class="col-md-7">{{purchaseApplyForm.storePurchaseApplyEntity.createTime}}</div>
                    </div>
                </div>
            </div>
        </el-card>
    </el-row>
    <el-row>
        <el-card class="box-card">
            <div class="text item">
                <el-form ref="form" :model="purchaseApplyForm" label-width="80px" size="mini">
                    <el-table border stripe ref="multipleTable" :data="purchaseApplyForm.storePurchaseApplyDetailEntityList" style="margin-bottom: 20px;"
                              tooltip-effect="dark" size="mini">
                        <el-table-column type="index" width="60" label="序号" align="center"> </el-table-column>
                        <el-table-column prop="materialId" label="耗材ID" width="80" align="center"></el-table-column>
                        <el-table-column prop="materialName" label="耗材名称" header-align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="specifications" label="规格" width="200" align="center"></el-table-column>
                        <el-table-column prop="materialModel" label="型号" width="200" align="center"></el-table-column>
                        <!--<el-table-column prop="materialQuantity" label="库存数量" width="200" align="center"></el-table-column>-->
                        <!--<el-table-column prop="unit" label="单位" width="100" :formatter="formatUnit" align="center"></el-table-column>-->
                        <el-table-column prop="showUnit" label="单位" width="100"  align="center"></el-table-column>
                        <el-table-column prop="materialQuantity" label="数量" width="100" align="center"></el-table-column>
                        <el-table-column prop="length" label="长" width="100" align="center"></el-table-column>
                        <el-table-column prop="width" label="宽" width="100" align="center"></el-table-column>
                        <el-table-column prop="weight" label="克重" width="100" align="center"></el-table-column>
                        <el-table-column prop="unitMoney" label="单价" width="100" align="center"></el-table-column>
                        <el-table-column label="总价" width="200" align="center">
                            <template slot-scope="scope">
                                <el-input type="number"
                                          v-model="scope.row.totalMoney"
                                          size="mini"
                                          min="0"
                                          max="100000"
                                          @change="totalMoneyChange(scope.row,scope.$index)">
                                </el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-col :span="12">
                        <el-form-item label="出库总金额：" size="mini" label-width="120px">
                            <el-input v-model="purchaseApplyForm.storePurchaseApplyEntity.totalMoney" readonly="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否含税：" size="mini" label-width="120px" :span="12">
                            <el-select v-model="purchaseApplyForm.storePurchaseApplyEntity.tax" filterable placeholder="请选择" size="mini">
                                <el-option
                                        v-for="item in e.taxEnum"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col class="text-center">
                        <el-form-item>
                            <el-button @click="close">返 回</el-button>
                        </el-form-item>
                </el-form>
            </div>
        </el-card>
    </el-row>
</div>
</div>
<script src="${request.contextPath}/statics/js/modules/storeMaterials/storematerialinOut.js?_${.now?long}"></script>
<style>
    .el-header{
        background-color: #ebeef5;
        color: #333;
        text-align: left;
        line-height: 40px;
        font-size: 12px;
    }
    .el-form-item__label {
        font-size: 12px;
    }
    .el-tree-node__label {
        font-size: 12px;
    }
    .el-pagination button, .el-pagination span:not([class*=suffix]) {
        font-size: 12px;
    }
    .el-table--mini td{
        padding: 0px 0px;
    }
</style>
</body>
</html>